﻿@{
    ViewBag.Title = "RandomBalls";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Random Balls</h2>

<style> 
    #canvas {
        margin-left: 10px;
        margin-top: 90px;
        background: #ffffff;
        border: thin solid #aaaaaa;
    }

    #glasspane {
        position: absolute;
        left: 50px;
        top: 200px;
        padding: 0px 20px 10px 10px;
        background: rgba(0, 0, 0, 0.3);
        border: thin solid rgba(0, 0, 0, 0.6);
        color: #eeeeee;
        font-family: Droid Sans, Arial, Helvetica, sans-serif;
        font-size: 12px;
        cursor: pointer;
        -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
        -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
        box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
    }

    #glasspane h2 {
        font-weight: normal;
    }

    #glasspane .title {
        font-size: 2em;
        color: rgba(255, 255, 0, 0.8);
    }

    #glasspane a:hover {
        color: yellow;
    }

    #glasspane a {
        text-decoration: none;
        color: #cccccc;
        font-size: 3.5em;
    }

    #glasspane p {
        margin: 10px;
        color: rgba(65, 65, 220, 1.0);
        font-size: 12pt;
        font-family: Palatino, Arial, Helvetica, sans-serif;
    }
</style>

<div id='glasspane'>
    <h2 class='title'>Bouncing Balls</h2>

    <p>One hundred balls bouncing</p>

    <a id='startButton'>Start</a>
</div>

<canvas id='canvas' width='750' height='500'>
    Canvas not supported
</canvas>

<script src='/JS/Html5Game/randBalls.js'></script>
